在前端開發裡，背景圖不只是「放一張好看的圖片」，它還能玩出很多延伸應用，讓介面更有層次感。重點是，這些技巧並不難，只要你理解 CSS 的幾個屬性，就能做出專業感十足的效果。

1. 背景圖縮放（background-size）

很多新手直接用一張圖鋪滿整個背景，但結果圖片被拉得很醜。這時候 background-size 就派上用場：

-cover：等比例放大，直到覆蓋整個容器，常用在全螢幕背景。

-contain：等比例縮放，讓整張圖片完整呈現，可能會留白。
**例子：**首頁 Banner 想要滿版，就用 background-size: cover;。

2. 多重背景（Multiple Backgrounds）

CSS 其實能同時疊好幾張背景圖。

CSS
background-image: url(star.png), url(space.jpg);
background-position: center, center;
background-size: 50px, cover;

這樣可以在星空底圖上，額外加一層固定大小的小星星，既節省 HTML 結構，也方便調整。

3. 背景固定（background-attachment）

滾動頁面時，讓背景不跟著動：

CSS
background-attachment: fixed;

效果就是俗稱的「視差滾動」（Parallax）。常用在旅遊網站或品牌頁，能製造沉浸感。

4. 背景漸層混合（background-blend-mode）

想讓文字在背景圖上更清晰，可以用漸層半透明色蓋在圖片上，再用 multiply、overlay 等混合模式。
例子：

CSS
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(hero.jpg);
background-blend-mode: overlay;

這樣背景就有暗化效果，文字可讀性提升。

5. 自適應裁切（clip-path + background）

如果你想讓背景圖不只是方形，可以搭配 clip-path 或 mask-image 做出圓形、三角形、波浪邊框的裁切，讓版面更活潑。

總結：背景圖的延伸技巧就是「疊、裁、混、動」。

掌握 background-size、多重背景、固定滾動、混合模式，加上一點創意，你就能讓介面在保持速度的同時，顏值直線上升。